<template>
  <div class="block">
    <div class="flex">
      <div
        :class="isSurfaceMode ? 'func-active' : 'func'"
        @click="changeSurfaceModeStatus()"
      >
        <img src="../../assets/face_mode.svg" alt="" class="icon" />
        <span class="func-name">显示面</span>
      </div>
      <div class="fill"></div>
      <div
        :class="isLineMode ? 'func-active' : 'func'"
        @click="changeLineModeStatus()"
      >
        <img src="../../assets/line_mode.svg" alt="" class="icon" />
        <span class="func-name">显示线框</span>
      </div>
      <div class="fill"></div>
      <div
        :class="isPointMode ? 'func-active' : 'func'"
        @click="changePointModeStatus()"
      >
        <img src="../../assets/point_mode.svg" alt="" class="icon" />
        <span class="func-name">显示顶点</span>
      </div>
      <div class="fill"></div>
      <div
        :class="isEdgeMode ? 'func-active' : 'func'"
        @click="changeEdgeModeStatus()"
      >
        <img src="../../assets/point_mode.svg" alt="" class="icon" />
        <span class="func-name">显示线类型</span>
      </div>
      <div class="fill"></div>
      <div
        :class="isEdgeMode ? 'func-active' : 'func'"
        @click="changeEdgeModeStatus()"
      >
        <img src="../../assets/point_mode.svg" alt="" class="icon" />
        <span class="func-name">隐藏网格</span>
      </div>
    </div>
    <div class="title">显示模式</div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps } from "vue";
import { useCoreStore, _global, useFloatMenuStore } from "@/UI/store";
import { storeToRefs } from "pinia";
import { useRoute } from "vue-router";
import { VIEW_MODE } from "@/FrontProcessing";
import { FloatMenuSignal } from "@/UI/config";
const coreStore = useCoreStore();
const floatMenuStore = useFloatMenuStore();
const { isSurfaceMode, isLineMode, isPointMode, isEdgeMode } =
  storeToRefs(coreStore);

coreStore.Notify.subscribe((msg: any) => {
  switch (msg.event) {
    case FloatMenuSignal.VIEW_FACE_MODE:
      closeShade();
      break;
    case FloatMenuSignal.VIEW_LINE_MODE:
      openShade();
      break;
    case FloatMenuSignal.VIEW_POINT_MODE:
      if (isPointMode.value) {
        pointsModeOff();
      } else {
        pointsModeOn();
      }
      break;
  }
});
function openShade() {
  _global.Engine.view.modeChang(VIEW_MODE.WIREFRAME);
  _global.Engine.state.set("ViewMode", VIEW_MODE.WIREFRAME);
  coreStore.setSurfaceMode(false);
  coreStore.setLineMode(true);
  coreStore.setLineMode(false);
  floatMenuStore.keyActiveStatusMap.set(9, false);
  floatMenuStore.keyActiveStatusMap.set(10, true);
}

function closeShade() {
  _global.Engine.view.modeChang(VIEW_MODE.SURFACE);
  _global.Engine.state.set("ViewMode", VIEW_MODE.SURFACE);
  coreStore.setSurfaceMode(true);
  coreStore.setLineMode(false);
  coreStore.setPointMode(false);
  floatMenuStore.keyActiveStatusMap.set(9, true);
  floatMenuStore.keyActiveStatusMap.set(10, false);
}

function pointsModeOn() {
  closeShade();
  _global.Engine.view.modeChang(VIEW_MODE.POINTS);
  _global.Engine.state.set("ViewMode", VIEW_MODE.POINTS);
  coreStore.setPointMode(true);
  floatMenuStore.keyActiveStatusMap.set(11, true);
}

function pointsModeOff() {
  closeShade();
  coreStore.setPointMode(false);
  floatMenuStore.keyActiveStatusMap.set(11, false);
}
function changeSurfaceModeStatus() {
  if (!isSurfaceMode.value) {
    closeShade();
  }
}
function changeEdgeModeStatus() {
  coreStore.setEdgeMode(!isEdgeMode.value);
  _global.Engine.view.setEdgeColor(isEdgeMode.value);
}

function changeLineModeStatus() {
  if (isLineMode.value) {
    closeShade();
  } else {
    openShade();
  }
}

function changePointModeStatus() {
  if (isPointMode.value) {
    pointsModeOff();
  } else {
    pointsModeOn();
  }
}
</script>
<style lang="less" scoped>
@import "../../styles/xxxTool.less";
</style>
